<template>
	<view class="my-tabbar" :class="['custom' + custom]" @touchmove.prevent>
		<view class="tabbar">
			<view class="tabbar-main"></view>
			<safe-area></safe-area>
		</view>
		<view class="tabbar fixed">
			<view class="tabbar-main">
				<view v-if="border" class="main-line"></view>
				<view class="main-areas">
					<view @click="on('clickItem', $event, j)" class="area-item" v-for="(i, j) in tabbar" :key="j" :class="['id' + j]">
						<image class="item-icon" :src="item(j, 'icon')"></image>
						<text class="item-text" :class="[current_ == j ? 'selected' : '']">{{ item(j, 'text') }}</text>
					</view>
				</view>
			</view>
			<safe-area></safe-area>
		</view>
	</view>
</template>

<script>
import SafeArea from '../safe-area'
function ifObject(data) {
	return typeof data === 'object' && !Array.isArray(data) && data !== null;
}

export default {
	name: 'my-tabbar',
	data() {
		return {
			current_: ''
		};
	},
	props: {
		fns: {
			type: Array,
			default: () => {
				return [];
			}
		},
		custom: {
			type: Number,
			default: 0
		},
		tabbar: {
			type: Object,
			default: () => {
				return {
					// home: {
					// 	text: '首页',
					// 	iconPath: '/static/index/icon_home.png',
					// 	selectedIconPath: '/static/index/icon_home_hl.png'
					// },
					// publish: {
					// 	text: '发布',
					// 	iconPath: '/static/index/icon_publish.png',
					// 	selectedIconPath: '/static/index/icon_publish_hl.png'
					// },
					// my: {
					// 	text: '我的',
					// 	iconPath: '/static/index/icon_my.png',
					// 	selectedIconPath: '/static/index/icon_my_hl.png'
					// }
				};
			}
		},
		current: {
			type: String,
			default: ''
		},
		border: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		item() {
			return (id, tag) => {
				if (!ifObject(this.tabbar[id])) this.$set(this.tabbar, id, {});
				const context = this.tabbar[id];
				switch (tag) {
					case 'text':
						if (typeof context[tag] !== 'string') this.$set(context, tag, '');
						return context[tag];
					case 'icon':
						if (typeof context.iconPath !== 'string') this.$set(context, 'iconPath', '');
						if (typeof context.selectedIconPath !== 'string') this.$set(context, 'selectedIconPath', context.iconPath);
						if (this.current_ == id) {
							return context.selectedIconPath;
						} else {
							return context.iconPath;
						}
				}
			};
		}
	},
	watch: {
		current: {
			handler(newVal) {
				this.current_ = newVal;
			},
			immediate: true
		}
	},
	methods: {
		on(fn, e, payload) {
			if (!this.fns.find(i => i === fn)) {
				// 触发内置方法
				if (typeof this[fn] === 'function') this[fn](e, payload);
			}
			// 触发回调方法
			this.$emit('handle', fn, e, payload);
		},
		clickItem(e, id) {
			this.current_ = id;
		}
	},
	components: {
		SafeArea
	}
};
</script>

<style scoped>
@import url('./custom.css');

.tabbar {
	z-index: 1;
}

.tabbar.fixed {
	background-color: #ffffff;

	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
}

.tabbar-main {
	height: 102rpx;

	display: flex;
	flex-direction: column;
}

.main-line {
	height: 2rpx;
	background-color: #e5e5e5;
}

.main-areas {
	flex: 1;

	display: flex;
	flex-direction: row;
}

.area-item {
	flex: 1;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.item-icon {
	width: 46rpx;
	height: 47rpx;
}

.item-text {
	font-size: 22rpx;
	color: #ababab;
}
</style>
